<template>
  <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>门禁管理</el-breadcrumb-item>
                <el-breadcrumb-item>事件列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <!--条件筛选-->
        <el-row :gutter='10'>
            <el-col :span='2'>
                <el-select size="small" v-model="table.deptId" 
                clearable placeholder="请选择部门" 
                @change='deptChange'>
                    <el-option v-for='item in table.depts' :key='item.deptId' :label="item.name" :value="item.deptId"></el-option>
                </el-select>
            </el-col>
            <el-col :span='2'>
                <el-select size='small' v-model="table.doorEvent" 
                clearable placeholder="请选择事件" 
                @change="eventChange">
                    <el-option label="进门" value="1"></el-option>
                    <el-option label="出门" value="2"></el-option>
                    <el-option label="无效卡" value="3"></el-option>
                </el-select>
            </el-col>
            <el-col :span='4'>
                <el-input size="small" placeholder="请输入名称或者设备号" suffix-icon="el-icon-search" v-model="table.queryKey" @keyup.enter.native="getTableData"></el-input>
            </el-col>
            <el-col :span='5'>
                <el-date-picker size='small' width='100%'
                v-model="table.time"
                type="daterange"
                :editable = 'false'
                value-format = 'yyyy-MM-dd'
                @change='timeChange'
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
            </el-col>
            
        </el-row>
        <!--表格-->
        <el-row class='bone-top-10'>
            <el-table :data='table.tableData' border stripe style='width:100%'
            size="small" :highlight-current-row="true" ref="multipleTable">
                <el-table-column width="100" label="编号" prop='id'></el-table-column>
                <el-table-column min-width="150" label="门" prop='doorName'></el-table-column>
                <el-table-column min-width="150" label="门禁" prop='accessName'></el-table-column>
                <el-table-column min-width="150" label="部门" prop='deptName'></el-table-column>
                <el-table-column min-width="150" label="门卡" prop='cardDevId'></el-table-column>
                <el-table-column width="150" label="人员" prop='empName'></el-table-column>
                <el-table-column width="150" label="事件">
                    <template slot-scope='scope'>
                        <span v-if='scope.row.doorEvent==1'>进门</span>
                        <span v-if='scope.row.doorEvent==2'>出门</span>
                        <span v-if='scope.row.doorEvent==3'>无效卡</span>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="事件类型">
                    <template slot-scope='scope'>
                        <span v-if='scope.row.eventType==1'>开门</span>
                        <span v-if='scope.row.eventType==2'>关门</span>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="事件触发">
                    <template slot-scope='scope'>
                        <span v-if='scope.row.trigger==1'>门卡</span>
                        <span v-if='scope.row.trigger==2'>地图</span>
                        <span v-if='scope.row.trigger==3'>其他</span>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="时间" prop='createTime'></el-table-column>
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination' 
            @current-change="handleCurrentChange" 
            :current-page="this.table.currentPage" 
            :page-size="this.table.pageSize" 
            layout="total, prev, pager, next, jumper" 
            :total="this.table.rowCount"></el-pagination>
        </el-row>
  </div>
</template>

<script>
import Http from "@/components/utils/httpUtil"
export default {
  data(){
      return {
          table: {
              deptId: '',
              depts: [],
              doorEvent: '',
              time: '',
              queryKey: '',
              tableData: [],
              currentPage: 1,
              pageSize: 10,
              rowCount: 0
          }
      }
  },
  methods:{
    //获取部门树
    getTreeData(){
        let p = {};
        Http.fetch('/dept/listTree',p)
        .then(res=>{
            this.table.depts = res.data;
        })
    },
    //部门下拉切换
    deptChange(){
        this.getTableData()
    },
    //事件下拉切换
    eventChange(){
        this.getTableData()
    },
    timeChange(){
        this.getTableData()
    },
    //table翻页
    handleCurrentChange(val) {
        this.table.currentPage = val;
        this.getTableData();
    },
    getTableData(){
        let p = {}
        let url = '/doorEvent/listQuery'
        p.start = (this.table.currentPage - 1) * this.table.pageSize
        p.num = this.table.pageSize
        if(this.table.deptId){
            p.deptId = this.table.deptId
        }
        if(this.table.doorEvent){
            p.doorEvent = this.table.doorEvent
        }
        if(this.table.queryKey){
            p.key = this.table.queryKey
        }
        if(this.table.time){
            p.startTime = this.table.time[0]
            p.endTime = this.table.time[1]
        }
        Http.fetch(url,p)
        .then(res=>{
            this.table.tableData = res.data.rows
            this.table.rowCount = res.data.total
        })
    }
  },
  mounted(){
      this.getTableData()
      this.getTreeData()
  }
}
</script>

<style scoped>

</style>
